CSS Flexbox

Flexbox는 content-based 정렬

#box-container{
    display:flex;
    flex-direction: row-reverse/row/column; 
}
#box-1{
    width:50%;
    height:50%;
}
#box-2{
    width:50%;
    height:50%;
}

/* main axis에 배열 */
justify-content:center/flex-start/flex-end/space-between/space-around/space-evenly;

/* cross axis에 배열 */
/* 
그니까 flex-direction 이 row면 ㅁㅁㅁ 
이럴거아냐 거기서 align-items는 ㅁ의 칸 안에서 vertical align을 지정.
*/
align-items: flex-start/flex-end/center/stretch(기본)/baseline;

/* nowrap상태는 무조건 구겨넣는다 */
flex-wrap:nowrap(기본)/wrap/wrap-reverse


/* 부모 container가 작아지거나 커질 때 item 크기 결정*/
flex-shrink: 숫자 /* 숫자가 높을 수록 더 많이 꾸겨진다 */
flex-grow: 숫자 /* 숫자가 높을 수록 더 많이 커진다 */

/* 기본 크기 설정 */
flex-bases: 10em/%/px;

/* 다 합쳐서*/
flex: 2 2 10px;
flex: 1 1 10px;
/* 
인 두개의 element가 있다면 
1번은 2번보다 두배로 빠르게 크고 줄어듦 역치는 20px
*/

/* 말그대로 순서 */
order: 1/2.. 

align-self: 각각 align-item 오버라이드하기